﻿

<table class="ctable" id="bookroom" width="100%">
<tr class="title">
	<td colspan="6" align=left>会議室情報</td>
</tr>
<?php
session_start ();
$room_id = $_REQUEST ['room_id'];
include_once '../../Model/Room.php';
$room = new Room ();
$rs = $room->get_room_id ( $room_id );
//TODO
if ($rs != NULL) {
	$result = '';
	for($i = 0; $i < count ( $rs ); $i ++) {		
		$result = $result . '<tr height=30px><td width="10%" align=right><b>室名:</b></td>';		
		$result = $result . '<td width="15%"> '.$rs[$i][1].'</td>';		
		$result = $result . '<td align=right width="10%"><b>椅子の定数:</b></td>';		
		$result = $result . '<td width="10%"> '.$rs[$i][2].'</td>';		
		$result = $result . '<td width="5%" align=right><b>料金:</b></td>';		
		$result = $result . '<td width="25%"> '.$rs[$i][3].'</td></tr>';
		
		$result = $result . '<tr height=30px><td align=right><b>会議室の詳細情報:</b></td>';		
		$result = $result . '<td colspan=5> '.$rs[$i][4].'</td></tr>';
	}	
	echo $result;
}
?>
</table>
<table class="ctable" id="tblPutRoom" width="100%">
<tr class="title">
	<td colspan="7" align=left>予約する</td>
</tr>
<tr><td colspan="7" align="center"><div id="inform"></div></td></tr> 
<tr>
	<td align=right>アカウント名:</td>
	<td>
		<input type="text" id="nameAccount" name="nameAccount" class="cinput" style="width: 70%;height: 21px;"/>
	</td>
	<td align=right>料金:</td>
	<td colspan=3>
		<input type="text" id="price" name="price" class="cinput" style="height: 21px;" value="<?php echo (10000);?>"/>(VND)
	</td>
</tr>
<tr>
	<td width="7%" align=right>予約年月日:</td>
	<td width="20%"><input type="text" id="putDate" name="putDate" class="cdate" style="width: 70%"></input></td>
	<td width="7%" align=right>スタート時間:</td>
	<td width="10%">
	<select id="timeStart" style="width: 50%">
	<?php 
	$hh = 0;
	for($i=0;$i<=47;$i++){
		if($i%2 == 0){
			if($hh>=0 && $hh<=9){
				echo '<option value="0'.$hh.':00">'.$hh.':00</option>';	
			}else{
				echo '<option value="'.$hh.':00">'.$hh.':00</option>';	
			}					
		}else{
		if($hh>=0 && $hh<=9){
				echo '<option value="0'.$hh.':30">'.$hh.':30</option>';	
			}else{
				echo '<option value="'.$hh.':30">'.$hh.':30</option>';	
			}
			$hh++;
		}
	}	
	?>
	</select>
	</td>
	<td width="7%" align=right>エンド時間:</td>
	<td width="10%">
	<select id="timeEnd" style="width: 50%">
	<?php 
	$hh = 0;
	for($i=0;$i<=47;$i++){
		if($i%2 == 0){
			if($hh>=0 && $hh<=9){
				echo '<option value="0'.$hh.':00">'.$hh.':00</option>';	
			}else{
				echo '<option value="'.$hh.':00">'.$hh.':00</option>';	
			}					
		}else{
		if($hh>=0 && $hh<=9){
				echo '<option value="0'.$hh.':30">'.$hh.':30</option>';	
			}else{
				echo '<option value="'.$hh.':30">'.$hh.':30</option>';	
			}
			$hh++;
		}
	}	
	?>
	</select>
	</td>
	<td width="15%" align="left">
		<input type="button" class="cbutton" id="putRoom" name="putRoom" value=" 予約 " style="width: 80px; height: 21px;"/>
	</td>
</tr>
</table>
<br><div id="container" style="min-width: 400px; height: 320px; margin: 0 auto"></div>

<input type="hidden" value="<?php echo $room_id;?>" id="hidRoomID" name="hidRoomID"/>
<input type="hidden" value="<?php echo ($rs[0][3]);?>" id="hidPrice" name="hidID"/>
<input type="hidden" value="10000" id="hidPrice2" name="hidID2"/>

<script type="text/javascript">
//Tao doi tuong bieu do
var chart;
//Danh sach truc X
var listX = ['21/03','20/03','19/03','<label style="color:red;">18/03</label>','17/03','16/03','15/03'];
//Danh sach truc Y
var listY = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
//Du lieu
///
var list;
/**
 * Grid theme for Highcharts JS
 * @author Torstein H𮳩
 */
Highcharts.theme = {
   colors: ['#DDDF00','#FF0000','#DDDF00','#FF0000','#DDDF00','#FF0000','#DDDF00','#FF0000','#DDDF00'],
   chart: {
	  backgroundColor: {
		 linearGradient: [0, 0, 500, 500],
		 stops: [
			[0, '#AAAAAA'],
			[1, '#AAAAAA']
		 ]
	  },
	  borderWidth: 2,
	  plotBackgroundColor: '#FFFFFF',
	  plotShadow: true,
	  plotBorderWidth: 0
   },
   title: {
	  style: {
		 color: '#000',
		 font: 'bold 16px "Tahoma", Tahoma, Tahoma'
	  }
   },
   tooltip: {
		style: {
		 color: '#000',
		 font: '16px "Tahoma", Tahoma, Tahoma'
	    }
	},
   subtitle: {
	  style: {
		 color: '#666666',
		 font: 'bold 12px "Tahoma", Tahoma, Tahoma'
	  }
   },
   xAxis: {
	  gridLineWidth: 1,
	  lineColor: '#000',
	  tickColor: '#000',
	  labels: {
		 style: {
			color: '#000',
			font: 'bold 13px Tahoma, Tahoma, Tahoma'
		 }
	  },
	  title: {
		 style: {
			color: '#333',
			fontWeight: 'bold',
			fontSize: '12px',
			fontFamily: 'Tahoma, Tahoma, Tahoma'
		 }
	  }
   },
   yAxis: {
	  minorTickInterval: 'auto',
	  lineColor: '#000',
	  lineWidth: 0,
	  tickWidth: 0,
	  tickColor: '#000',
	  labels: {
		 style: {
			color: '#000',
			font: 'bold 11px Tahoma, Tahoma, Tahoma'
		 }
	  },
	  title: {
		 style: {
			color: '#333',
			fontWeight: 'bold',
			fontSize: '12px',
			fontFamily: 'Tahoma, Tahoma, Tahoma'
		 }
	  }
   },
   labels: {
	  style: {
		 color: '#99b'
	  }
   }
};

// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);	

function process(date){
   var parts = date.split("/");
   var date = new Date(parts[1] + "/" + parts[0] + "/" + parts[2]);
   return date.getTime();
}
$(document).ready(function() {
	$("#putDate").datepicker({dateFormat:"dd/mm/yy"});
	chartTimeline();
	
	$('#putDate').change(function(e){
		chartTimeline();
	});		
	
	$("#timeStart").change(function(e){				
		xx = $("#hidPrice").val()*($("#timeEnd").attr("selectedIndex")-$("#timeStart").attr("selectedIndex"))+parseInt($("#hidPrice2").val());
		$("#price").val(xx);
	});
	
	$("#timeEnd").change(function(e){
		_alert("inform","");
		if($("#timeStart").attr("selectedIndex") > $("#timeEnd").attr("selectedIndex")){
			_alert("inform","Thời gian bắt đầu phải nhỏ hơn thời gian kết thúc!");
			$("#timeEnd").attr("selectedIndex",0);
			return;
		}
				
		xx = $("#hidPrice").val()*($("#timeEnd").attr("selectedIndex")-$("#timeStart").attr("selectedIndex"))+parseInt($("#hidPrice2").val());
		$("#price").val(xx);
	});
	
	$("#putRoom").click(function(){
		var room_id = $("#hidRoomID").val();
		var user_id = $("#nameAccount").val();
		var time_start = $("#putDate").val().replace(/ /gi, "")+" "+$("#timeStart").val();
		var time_end = $("#putDate").val().replace(/ /gi, "")+" "+$("#timeEnd").val();
		var price = $("#price").val();

		var now = new Date();
		dd2 = now.getDate();
		mm2 = now.getMonth()+1;
		yy2 = now.getFullYear();
		now = new Date(dd2+"/"+mm2+"/"+yy2);
		var date = new Date($("#putDate").val().replace(/ /gi, ""));
		zz = now.getTime();
		xx = date.getTime();
		
		if($("#nameAccount").val().replace(/ /gi, "") == ""){
			_alert("inform","アカウント氏名は空じゃないでするべきです。");
			return;
		}else if($("#putDate").val().replace(/ /gi, "") == ""){
			_alert("inform","予約年月日は空じゃないでするべきです");
			return;	
		}else if(zz > xx){
			_alert("inform","予約生年月日は今の以上です。");
			return;
		}else if($("#timeStart").attr("selectedIndex") > $("#timeEnd").attr("selectedIndex")){
			_alert("inform","スタート時間はエンド時間より小さいです");
			$("#timeStart").attr("selectedIndex",0);
			return;
		}	
			
		var path='room_id='+room_id+'&user_id='+user_id+'&timeStart='+time_start+'&timeEnd='+time_end+'&price='+price;
		$.ajax({
  			type:"POST",
  			url: "data/room/book_room/put_room.php",
  			data: path,
            async: true,
			success: function(data) {
				_alert("inform",data);
				$("#putDate").val('');
				$("#nameAccount").val('');
				chartTimeline(); 				
		     }
	    }); 
	});
		
}); 	

function chartTimeline(){
	var room_id = $("#hidRoomID").val();
	var path='room_id='+room_id+'&date='+$("#putDate").val().replace(/ /gi, "");
	$.ajax({
			type:"POST",
			url: "data/room/book_room/get_timeline.php",
			data: path,
        	async: true,
			success: function(data) { 			
				arrData = data.split('(*)');
				listX = arrData[0].split(',');;
				list = $.parseJSON(arrData[1]);			
				//_alert("inform",data);
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						type: 'bar'
					},
					title: {
						text: '時間'
					},
					xAxis: {
						categories: listX,
						title: {
							text: '予約年月日'
						}
					},
					yAxis: {
						categories: listY,
						min: 0,
						max: 24,
						title: {
							text: '時間'
						}
					},
					tooltip: {
						formatter: function() {
							return ''+
								this.series.name
						}
					},
					plotOptions: {
						series: {
							stacking: 'normal'
						}
					},
					legend: {
						enabled: false
				    },
				    series: list
				});
	     	}
    }); 	
}

</script>